<template>
	<view v-if="show===true" class="xphoto" @click="close">
		<view class="bg"></view>
		<view class="in">
			<swiper
				class="xphoto-swiper"
				:indicator-dots="true"
				indicator-color="#cccccc"
				:indicator-active-color="active"
				:circular="circular"
				duration="400"
				:current="index"
			>
				<swiper-item class="swiper-item" v-for="(item, index) in imglist" :key="item.id">
					<image class="xphoto-img" mode="aspectFit" :src="item.thumb" />
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				imglist: [],
				index: 0,
			};
		},
		props: {
			active: {
				type: String,
				default: '#007aff',
			},
			circular: {
				type: Boolean,
				default: false,
			}
		},
		methods: {
			open(imglist, index) {
				this.show = true;
				this.imglist = imglist;
				this.index = index;
			},
			close() {
				this.show = false;
			}
		},
	}
</script>

<style lang='scss'>
.xphoto {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.9);
		z-index: 1;
	}
	.in {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
}
.xphoto-swiper {
	width: 100%;
	height: 1300rpx;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.xphoto-img {
	width: 100%;
	height: 100%;
}
</style>